<template>
  <PublicPage bgColor="#F5F5F5">
    <view class="p-3 relative z-10 bg-[#F5F5F5]">
      <view class="pt-2">
        <text class="text-base font-bold">数据中心</text>
        <text class="pl-2 u-content-color">更新时间: {{ newTimes }}</text>
      </view>
      <view
        class="grid grid-cols-3 py-4 my-4 text-white rounded-lg gap-x-3 gap-y-4 u-primary-bg">
        <view class="text-center">
          <view class="pb-3 text-xl font-medium">
            {{ info?.todayOrderNum || 0 }}
          </view>
          <view>今日订单数</view>
        </view>
        <view class="text-center">
          <view class="pb-3 text-xl font-medium">
            ￥{{ info?.todayOrderAmount || 0 }}
          </view>
          <view>今日订单金额</view>
        </view>
        <view class="text-center">
          <view class="pb-3 text-xl font-medium">
            {{ info?.todayOrderDoctorNum || 0 }}
          </view>
          <view>今日开单医生</view>
        </view>
        <view class="text-center">
          <view class="pb-3 text-xl font-medium">
            {{ info?.monthOrderNum || 0 }}
          </view>
          <view>本月订单数</view>
        </view>
        <view class="text-center">
          <view class="pb-3 text-xl font-medium">
            ￥{{ info?.monthOrderAmount || 0 }}
          </view>
          <view>本月订单金额</view>
        </view>
        <view class="text-center">
          <view class="pb-3 text-xl font-medium">
            {{ info?.monthOrderDoctorNum || 0 }}
          </view>
          <view>本月开单医生</view>
        </view>
      </view>
    </view>

    <view class="bg-white px-3 pt-3 sticky top-0 z-[99]">
      <u-search
        v-model="searchData.searchValue"
        shape="square"
        height="80rpx"
        placeholder="医生姓名 / 电话 / 诊所名称"
        :animation="true"
        @search="search"
        @custom="search"
        @clear="search"></u-search>
      <view
        class="flex items-center justify-center py-3 u-primary borderBottom"
        @click="overlayShow = true">
        <text class="pr-1">{{ list[tabsCurrent] }}</text>
        <i class="iconfont">&#xe601;</i>
      </view>

      <view
        class="relative"
        :class="overlayShow ? 'h-auto' : 'h-0 overflow-hidden'">
        <view class="box-content absolute top-0 w-full px-3 bg-white -left-3">
          <view class="grid grid-cols-3 gap-3 py-3">
            <view
              v-for="(item,index) in list"
              class="text-center"
              :class="tabsCurrent === index ? 'selected' : 'unselect'"
              @click="tabsChange(index)">
              {{ item }}
            </view>
          </view>
        </view>
      </view>
    </view>

    <u-overlay
      :show="overlayShow"
      @click="overlayShow = false"
      :zIndex="9"></u-overlay>

    <view class="bg-white">
      <view
        v-for="item in dataList"
        :key="item.id"
        class="mx-3 borderBottom"
        @click="">
        <UserCard
          :avatar="item.headimg"
          avatar-class="w-10 h-10 rounded-full"
          :userName="item.userName"
          :deptName="item.deptname"
          :postName="item.postName"
          :com="item.com">
          <template #content>
            <view class="py-3 mt-2 rounded bg-[#F5F5F5] grid grid-cols-3">
              <view class="text-center">
                <view>{{item.personData.totalOrderNum}}单</view>
                <view class="pt-1 fz-12 u-tips-color">总开单</view>
              </view>
              <view
                class="text-center">
                <view>￥{{item.personData.totalOrderAmount}}</view>
                <view class="pt-1 fz-12 u-tips-color">金额</view>
              </view>
              <view class="text-center">
                <view>{{ item.personData.totalPatientNum }}</view>
                <view class="pt-1 fz-12 u-tips-color">患者</view>
              </view>
            </view>
            <view class="pt-3 fz-12">
              <text>{{ list[tabsCurrent] }}</text>
              <text class="pl-3 pr-2 u-tips-color">开单数:</text>
              <text>{{ item.personData.currentOrderNum }}</text>
              <text class="pl-3 pr-2 u-tips-color">开单金额:</text>
              <text>￥{{ item.personData.currentOrderAmount }}</text>
            </view>
          </template>
        </UserCard>
      </view>
    </view>

    <Empty v-if="loadStatus === 'nomore' && dataList.length === 0" :type="5" />
    <LoadMore v-else :status="loadStatus" />
  </PublicPage>
</template>

<script setup lang="ts">
import UserCard from '@/components/userCard.vue'
import dayjs from 'dayjs'
import { statisticalData, getStatsExpertList } from '@/api/expert'
import { ExpertOrderStatisticsTypes, ExpertStatisticsItemTypes } from '@/types/expert'
import { usePageList } from '@/hooks/usePageList'
import Empty from '@/components/empty.vue'
import LoadMore from '@/components/loadMore.vue'

// 获取头部统计数据
const info = ref<ExpertOrderStatisticsTypes>()
const newTimes = ref<string>()
const getData = async () => {
  newTimes.value = dayjs().format('YYYY-MM-DD HH:mm')
  const { data } = await statisticalData<ExpertOrderStatisticsTypes>()
  info.value = data
}

// 查询列表参数
const searchData = reactive({
  searchValue: '',
  startTime: ''
})
// 获取列表
const {
  getList,
  search,
  list: dataList,
  status: loadStatus
} = usePageList<ExpertStatisticsItemTypes>((params) =>
  getStatsExpertList({ ...params, ...searchData })
)

const list = ref(['全部','近30天开单','昨日','本周','本月']);
const tabsCurrent = ref(0) // tabs选中下标
const tabsChange = (index: number) => {
  tabsCurrent.value = index;
  switch (index) {
    case 1:
      searchData.startTime = dayjs().subtract(30, 'day').format('YYYY-MM-DD');
      break;
    case 2: 
      searchData.startTime = dayjs().subtract(1, 'day').format('YYYY-MM-DD');
      break;
    case 3: 
      let day = dayjs().day();
      searchData.startTime = dayjs().subtract(day-1, 'day').format('YYYY-MM-DD');
      break;
    case 4: 
      let date = dayjs().date();
      searchData.startTime = dayjs().subtract(date-1, 'day').format('YYYY-MM-DD');
      break;
    default:
      searchData.startTime = ''
      break;
    }
  overlayShow.value = false;
  search();
}
// 天数筛选弹窗
const overlayShow = ref(false)

onLoad(() => {
  tabsChange(4);
  getList()
  getData()
})

// 下拉刷新
onPullDownRefresh(async () => {
  try {
    getData();
    await search()
    setTimeout(() => {
      uni.stopPullDownRefresh()
    }, 1000)
  } catch (error) {
    uni.stopPullDownRefresh()
  }
})
// 加载更多
onReachBottom(() => {
  getList()
})
</script>

<style lang="scss" scoped>
.unselect {
  border: solid 1px #f5f5f5;
  background-color: #f5f5f5;
  color: $u-content-color;
  line-height: 60rpx;
  border-radius: 8rpx;
}
.selected {
  border: solid 1px $u-primary;
  background-color: $u-primary-light;
  color: $u-primary;
  line-height: 60rpx;
  border-radius: 8rpx;
}
</style>
